金魚都能懂的網頁切版：3、4

人員卡片

https://codepen.io/mikeyam/pen/qBZzRvG

在body設定flex，讓整個版面水平置中

html ,body{
    height: 100%;
}
body{
    display: flex;
    align-items: center;
    background-color: #003;
}
.wrap{
    display: flex;
    width: 1200px;
    margin: auto;
}

讓卡片用 transform: translateY(0px);做位移

.box{
    width: 368px;
    margin: 15px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #fff;
    transform: translateY(0px);
    transition: .5s;
}
.box img{
    width: 100%;
    vertical-align: middle;
}
.box h2{
    border-bottom: 1px solid #333;
    padding-bottom: .3em;
    margin-bottom: .4em;
    font-weight: 500;
    transition: .3s;
}
.box p{
    line-height: 1.6;
    font-weight: 100;
    transition: .3s;
}

在文字位置上方用偽元素製造出三角的造型，用absolute固定位置，並向上位移 transform: translateY(-100%);

.box .text{
    padding: 20px;
    position: relative;
}
.box .text::before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    border-top: 50px solid transparent;
    border-left: 184px solid #fff;
    border-right: 184px solid #fff;
    transform: translateY(-100%);
}

當觸碰時，會位移50px
transform: translateY(-50px)

.box:hover{
    transform: translateY(-50px);
}
.box:hover .text::before{
    border-left: 184px solid #FEB85D;
    border-right: 184px solid #FEB85D;
}
.box:hover .text{
    background-image: linear-gradient(0deg, #FB8076, #FEB85D);
}
.box:hover h2{
    color: #fff;
    border-bottom-color: #fff;
}
.box:hover p{
    color: #fff;
}

交錯漂浮版

https://codepen.io/mikeyam/pen/dyMBReE?editors=1100

fixed 背景圖片永遠固定在畫面範圍中
center center 背景位置
100% 100%; 背景尺寸

body{
    padding: 100px 0;
    background: linear-gradient(20deg,#3d5493,#1aa2a0) fixed center center/ 100% 100%;
}
.wrap{
    width: 1200px;
    margin: auto;
}

每個小區塊用 flex 做水平置中

.box{
    display: flex;
    align-items: center;
    margin-bottom: 70px;
    /* background-color: #ccc; */
}
.box .pic{
    width: 55%;
    flex-shrink: 0;
}
.box .pic img{
    width: 100%;
    vertical-align: middle;
}
.box .text{
    width: 55%;
    background-color: #fa8;
    flex-shrink: 0;
    padding: 50px 30px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

因為上方 flex-shrink 都設定收縮壓皆為0，會因此爆版（超出寬度範圍），因此把每個區塊都向左推10%
https://ithelp.ithome.com.tw/articles/10225779
first-child 會選取第一個子物件
也就是.box下的第一個子物件

.box > :first-child{
    margin-right: -10%;
}

使用 :nth-child(n) 來選取特定順序項目
可參考：
http://csscoke.com/2013/09/21/%E4%BD%BF%E7%94%A8css3-nth-childn-%E9%81%B8%E5%8F%96%E5%99%A8%E8%A9%B3%E8%A7%A3/
使用color-converter套件把色彩轉為rgb形式，在第四格設定顏色透明度

box:nth-child(1) .text{
    background-color: rgb(240, 174, 193, .8);
}
.box:nth-child(2) .text{
    background-color: rgb(26, 162, 160, .8);
}
.box:nth-child(3) .text{
    background-color:  rgb(61, 84, 147, .8);
}
.box:nth-child(4) .text{
    background-color: rgb(240, 0, 143, .8);
}